<template>
  <div class="container-header head-form" slot="header">
    <Form class="search">
      <Row>
        <Col span="6">
          <FormItem label="中策订单号">
            <Input v-model.trim="list.form.purchOrderSn" clearable placeholder="订单号" @on-enter="onSearchBtnClick" />
          </FormItem>
           <FormItem label="门店">
              <StoreSelect v-model="list.form.storeId" :src="src" :distributorId="list.form.distributorId" :provinceId="list.form.provinceId" :cityId="list.form.cityId" :areaId="list.form.areaId"></StoreSelect>
            </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="支付流水号">
            <Input v-model.trim="list.form.thirdPaySn" clearable placeholder="支付流水号" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="交易时间">
            <DatePicker v-model="timeRange" placeholder=交易时间 type="daterange"></DatePicker>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="经销商">
            <DistributorSelect v-model="list.form.distributorId" ref="distributorSelect" />          
          </FormItem>
          <FormItem label="支付方式">
               <Select  v-model="list.form.payType" clearable>
                <Option
                  v-for="item in payTypeList"
                  :value="item.value"
                  :key="item.id"
                >{{item.meaning}}</Option>
              </Select>
            </FormItem>
        </Col>
        <Col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import AreaSelect from '@/components/AreaSelect';
  import DistributorSelect from '~/DistributorSelect';
  import SelectList from '@/components/SelectList';
  import { formatDate } from '@/util';
  import StoreSelect from '@/components/StoreSelect'
  import data from './ListData';

  export default {
    props: {
      list: {
        type: Object,
        default: ''
      },
      payTypeList:{
        type:Array,
        default:()=>[]
      }
      
    },
    data() {
      return {
        currValue: [],
        src: '/common/store/listStores',
      }
    },
    computed: {
      timeRange: {
        get() {
          return [this.list.form.startPayDate, this.list.form.endPayDate]
        },
        set(val) {
          const [s, e] = val
          this.list.form.startPayDate = s ? formatDate(s) + ' 00:00:00' : s
          this.list.form.endPayDate = e ? formatDate(e) + ' 23:59:59' : e
        }
      }
    },
    components: {
      AreaSelect,
      SelectList,
      DistributorSelect,
      StoreSelect
    },
    mounted() {
    },
    methods: {
      onSearchBtnClick() {
        let ml = 15*86400000
        let { startPayDate, endPayDate } = this.list.form
        if (!startPayDate) {
          this.$Message.info('请选择查询的时间范围')
          return
        }
        let isLarge = (new Date(endPayDate).getTime() - new Date(startPayDate).getTime()) > ml
        if (isLarge) {
          this.$Message.info('时间范围不能超过15天')
          return
        }
        this.$emit('onSearchBtnClick')
      },
      onAddBtnClick() {
        this.$emit('onAddBtnClick')
      },
     
    },
    watch: {
    }
  }
</script>
